<script setup>
import { Avatar } from '@element-plus/icons-vue'
import { ref, onMounted } from 'vue'
import { getAdminListService } from '@/api/admin'
const adminList = ref([])
const total = ref(0)
const loading = ref(true)
const nickname = ref()
const createTime = ref()
// 查询参数
const params = ref({
    page: 1,
    pageSize: 10
})

// 获取管理员列表
const getAdminList = async () => {
    const res = await getAdminListService(params.value)
    adminList.value = res.data
    loading.value = false
}

//搜索条件重置
const reset = () => {
    nickname.value = ''
    createTime.value = ''
}
onMounted(() => {
    getAdminList()
})
</script>

<template>
    <el-card class="main-card">
        <template #header>管理员列表</template>

        <!-- 表单-查询区域 -->
        <el-form inline>
            <el-form-item label="昵称">
                <el-input v-model="nickname"></el-input>
            </el-form-item>
            <el-form-item label="创建时间">
                <el-date-picker v-model="createTime" type="date" placeholder="选择日期" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary">搜索</el-button>
            </el-form-item>
            <el-form-item>
                <el-button @click="reset">重置</el-button>
            </el-form-item>
        </el-form>

        <!-- 数据渲染区域 -->
        <el-table :data="adminList" style="width: 100%" v-loading="loading">
            <el-table-column label="id" prop="id">
                <template #default="{ row }"></template>
            </el-table-column>
            <el-table-column label="头像" prop="avatar">
                <template #default="{ row }">
                    <el-link :underline="false"> <el-avatar :src="row.avatar" :size="40"></el-avatar></el-link>
                </template>
            </el-table-column>
            <el-table-column label="昵称" prop="nickname"></el-table-column>
            <el-table-column label="账户" prop="username"></el-table-column>
            <el-table-column label="最后登录时间" prop="last_login_time"></el-table-column>
            <el-table-column label="最后登录ip" prop="last_login_ip"></el-table-column>
            <el-table-column label="创建时间" prop="create_time"></el-table-column>
        </el-table>
    </el-card>
</template>

<style lang="scss" scoped></style>
